<template>
  <div>
    <el-form :inline="true" class="query-form" ref="searchForm" :model="searchForm" @keyup.enter.native="refreshList()"
      @submit.native.prevent>
      <!-- 搜索框-->
      <el-form-item prop="queryDate">
        <el-date-picker v-model="searchForm.queryDate" type="date" align="right"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item prop="period">
        <el-select v-model="searchForm.dateRange" placeholder="请选择" size="small" style="width: 100%;">
          <el-option v-for="item in dateList" :key="item.value" :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query()" size="small" :loading="loading">查询</el-button>
      </el-form-item>
      <el-form-item style="font-size: 10px; color: #9A9A9A;">
        {{beginDate}}至{{endDate}}
      </el-form-item>
    </el-form>
    <UserPortrait title="性别分布" style="margin-bottom: 20px;" :visitUv="visitUv['genders']" :columns="['性别', '用户数']" :visitUvNew="visitUvNew['genders']"/>
    <UserPortrait title="年龄分布" style="margin-bottom: 20px;"  :visitUv="visitUv['ages']" :columns="['年龄', '用户数']" :visitUvNew="visitUvNew['ages']"/>
    <UserPortrait title="省级分布" style="margin-bottom: 20px;"  :visitUv="removeZero(visitUv['province'])" :columns="['省份', '用户数']" :visitUvNew="removeZero(visitUvNew['province'])"/>
    <UserPortrait title="终端分布" style="margin-bottom: 20px;"  :visitUv="visitUv['platforms']" :columns="['终端', '用户数']" :visitUvNew="visitUvNew['platforms']"/>
    <UserPortrait title="机型分布" style="margin-bottom: 20px;"  :visitUv="removeZero(visitUv['devices'])" :columns="['机型', '用户数']" :visitUvNew="removeZero(visitUvNew['devices'])"/>
  </div>
</template>

<script>
  import moment from 'moment'
  import UserPortrait from '@/components/userPortrait/index.vue'
  export default {
    data() {
      return {
        searchForm: {
          queryDate: moment().subtract(1, 'days'),
          dateRange: 0
        },
        dateList: [{
          label: "近1天",
          value: 0
        },{
          label: "近7天",
          value: 6
        },{
          label: "近30天",
          value: 29
        }],
        loading: false,
        visitUv: {},
        visitUvNew: {}
      }
    },
    mounted() {
      this.query()
    },
    components: {
      UserPortrait
    },
    computed: {
      beginDate: {
        get () {
          return moment(moment(this.searchForm.queryDate).subtract(this.searchForm.dateRange, 'days')).format("YYYY-MM-DD");
        }
      },
      endDate: {
        get () {
          return moment(this.searchForm.queryDate).format("YYYY-MM-DD");
        }
      }
    },
    methods: {
      removeZero(val){
        if(val) {
          var keys = Object.keys(val)
          keys.forEach((key)=>{
            if(val[key] == 0) {
              delete val[key]
            }
          })
        }
        return val
      },
      query() {
        this.loading = true
        var url = "/wx/getUserPortrait"
        this.$http({
          url: url,
          method: 'get',
          params: {
            'beginDate': moment(moment(this.searchForm.queryDate).subtract(this.searchForm.dateRange, 'days')).format("YYYY-MM-DD"),
            'endDate': moment(this.searchForm.queryDate).format("YYYY-MM-DD")
          }
        }).then(({
          data
        }) => {
          this.loading = false
          console.log(data.data)
          if (data && data.success) {
            this.visitUv = data.data.visitUv || {}
            this.visitUvNew = data.data.visitUvNew || {}
          }
        })
      }
    }
  }
</script>
